<template>
  <div>
    <el-form :model="userInfo" :inline="true" size="small">
      <el-form-item label="用户名">
        <el-input v-model="userInfo.userName" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="userInfo.userStatus" placeholder="请选择状态">
          <el-option label="正常" value="1"></el-option>
          <el-option label="冻结" value="2"></el-option>
          <el-option label="注销" value="3"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>

        <el-button @click="clearForm">重置</el-button>

      </el-form-item>

    </el-form>
    <div class="opt_bar">
      <el-button type="primary" plain size="small" @click="handleClick({})">新增</el-button>
      <el-button type="info" plain size="small">导入</el-button>
      <el-button type="warning" plain size="small">导出</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%" :border="true">
      <el-table-column prop="userName" label="用户名" width="180">
      </el-table-column>
      <el-table-column prop="nickName" label="用户昵称" width="180">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号">
      </el-table-column>
      <el-table-column prop="userStatus" label="状态">
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间">
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <UserEdit :dialogVisible="dialogVisible" 
      :closeDialog="closeDialog" 
      :editRowData="editRowData"
      :submitUserData="submitUserData"/>
    <div style="display:flex;justify-content:right">

      <el-pagination :page-size="10" :pager-count="5" layout="prev, pager, next" :total="4">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import UserEdit from "./UserEdit.vue"
export default {
  data() {
    return {
      userInfo: {
        userName: '',
        nickName: '',
        userStatus: ''
      },
      editRowData:{},
      userStatusDict: {
        "1": "正常",
        "2": "冻结",
        "3": "注销"
      },
      dialogVisible: false,
      tableData: [{
        id:1,
        createDate: '2016-05-02',
        userName: 'wxh',
        nickName: '王小虎',
        userStatus: '1',
        mobile: '15671660909'
      }, {
        id:2,
        createDate: '2016-05-04',
        userName: 'wxh2',
        nickName: '王小虎2',
        userStatus: '1',
        mobile: '15671660919'
      }, {
        id:3,
        createDate: '2016-05-01',
        userName: 'wxh3',
        nickName: '王小虎3',
        userStatus: '2',
        mobile: '15671660929'
      }, {
        id:4,
        createDate: '2016-05-03',
        nickName: '王小虎4',
        userName: 'wxh4',
        userStatus: '3',
        mobile: '15671660939'
      }]
    }
  },
  methods: {
    onSubmit: function () {
      console.log(this.userInfo)

      this.tableData.forEach((item) => {
        item.userStatus = this.userStatusDict[item.userStatus]
      })

    },
    clearForm: function () {

    },
    onExport: function () {

    },
    handleClick: function (row) {
      console.log(111, this.dialogVisible, row);
      this.editRowData = row
      this.dialogVisible = true
      
    },
    closeDialog() {
      this.dialogVisible = false
    },
    submitUserData(data) {
      this.dialogVisible = false;
      if(data.id){
          this.tableData.some((item) => {
                  console.log(item.id, data.id, 12333)
                  if(item.id == data.id){
                      for(let key in item){
                        item[key] = data[key]
                      }
                      return true
                  }
                     
                })
      } else{
        this.tableData.push(data)
      }
      
    }
  },
  components: {
    UserEdit
  }
}
</script>
<style scoped>
.opt_bar {
  margin-bottom: 8px;
}
</style>